<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/shopping_and_login.css">
    <!-- <script src="js/date.js"></script> -->
    <style>
        body {
            overflow-x: hidden;
        }
    </style>
</head>

<body style="width: 100%;">
    <!-- 使用说明 -->
    <div id='explain'>
        <h3>使用详情,因为这是我自己做的,有点乱,还请多多包涵,但是在这可以介绍本页面的具体使用方式.</h3>
        <ul id='menu'>
            <li>1.购物页面:
                <ul class='submenu'>
                    <li>1.1 在左边有导航栏,点击可进入该按钮的指定页面,但不是超链接.</li>
                    <li>1.2 在购物时可见有详情解释
                        <ul>
                            <li>1.2.1 如:原价、优惠金额、现价、商品详情、商品名称等</li>
                        </ul>
                    </li>
                    <li>1.3 购物车内介绍:
                        <ul>
                            <li>1.3.1 商品的右下角可加入购物车,购买需进入 [购物车] 页面</li>
                            <li>1.3.2 购物车内可进行购买,用户初始金额为: " + 感谢您曾经来过 + " ¥,显示在右上方,下方红色按钮可购买购物车内全部商品</li>
                            <li>1.3.3 购买商品时在[购物车]内有优惠券可以使用
                                <ul>
                                    <li>1.3.3.1 使用方法:先领取优惠券,再点击[使用一元优惠券]就可以使用了</li>
                                    <li>1.3.3.2 去掉使用一元优惠券方法:点击[正在使用一元优惠券]</li>
                                </ul>
                            </li>
                            <li>1.3.4 结算商品后商品购买状态为(未对该商品进行任何操作)属于正常操作</li>
                            <li>1.3.4 卡密的介绍:
                                <ul>
                                    <li>1.3.4.1 点击[购物车]右上方的[获得卡密]方可领取卡密</li>
                                    <li>1.3.4.2 获得的卡密可在左侧[卡密]内使用</li>
                                    <li>1.3.4.3 在[卡密]内卡密显示框右方[使用卡密]即可使用</li>
                                    <li>1.3.4.4 使用卡密可以获得1元优惠券一张,但是卡密的内容不可以修改</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>2.更新详情:
                <ul class='submenu'>
                    <li>2022年5月23日 页面初步制作、css初步完成、数组初步创建完成</li>
                    <li>2022年5月24日 页面初步完成,可以简单的加入购物车进行购买</li>
                    <li>2022年5月27日 购物车内容可以在js文件中添加修改商品名称和价格</li>
                    <li>2022年6月10日 登录注册初步完成,只能用固定账号密码登录</li>
                    <li>2022年6月21日 网页进行大更新,暂停使用</li>
                    <li>2022年6月28日 网页正常使用
                        <ul>
                            <li>增强了用户体验</li>
                            <li>增加了菜品的名称、原价、优惠金额和商品现价</li>
                            <li>增加了商品图片的位置,后续会陆续添加图片</li>
                        </ul>
                    </li>
                    <li>2022年7月11日 增加了商品图片和商品简介,保证大家购买的放心安心</li>
                    <li>2022年7月21日 添加了点击图片可放大查看的功能</li>
                    <li>2022年8月5日 添加了放大图片后点击图片可打开新页面查看图片
                        <ul>
                            <li>优点:
                                <ul>
                                    <li>更直观的看到图片关键内容</li>
                                    <li>图片不失真,保证图片的原汁原味,避免错过关键内容</li>
                                </ul>
                            </li>
                            <li>缺点:
                                <ul>
                                    <li>会有少许bug导致图片打不开</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>......</li>
                    <li>2022年 10月28日添加了设置按钮,可以调节字体样式</li>
                    <li>2022年 10月29日添加了调节背景颜色的下拉框</li>
                    <li>2022年 10月30日添加了历史记录,点击可以查看部分的操作历史、添加了版本号</li>
                    <li>2022年 11月5日添加了背景&lt;水墨画&gt;效果</li>
                    <li>2022年 11月22日在设置里面添加可跳转到别的网页上的按钮</li>
                    <li>2022年 12月19日修改了登录注册的UI,看起来更美观
                        <ul>
                            <li>增加了登录页面的背景图片</li>
                            <li>输入框靠右,使页面看起来更简洁,并增加了判断输入格式
                                <ul>
                                    <li>用户名或密码长度应为6~12位,如果不能满足条件则完成不了登录或注册</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        function menushow() {
            let lis = document.querySelectorAll("#menu li");
            lis.forEach(function (obj) {
                let submenu = obj.firstElementChild;
                if (submenu != null) {
                    obj.style.listStyleImage = "url(img/1.png)";
                } else {
                    // obj.style.listStyleImage = "url(img/2.png)";
                    obj.style.listStyle = "none";
                }
                obj.onclick = function (y) {
                    y.stopPropagation();
                    if (submenu != null) {
                        if (submenu.style.display == "block") {
                            submenu.style.display = "none";
                            obj.style.listStyleImage = "url(img/1.png)";
                        } else {
                            submenu.style.display = "block";
                            obj.style.listStyleImage = "url(img/2.png)";
                        }
                    } else {
                        //
                    }
                }
            })
        }
        window.onload = menushow;
    </script>
</body>

</html>